<template>
    <div v-if='props.search' :class='$style.searchPart'>
        <XSearch :fields='filter' @search='search'>
            <template #default>
                <slot name='search'></slot>
            </template>
        </XSearch>
    </div>

    <div>
        <template v-if='slots.toolBar'>
            <div :class='$style.toolBar'>
                <slot name='toolBar'></slot>
            </div>
        </template>

        <div>
            <a-table :pagination='false' :loading='loading' :columns='columns' :data-source='rowsData'>
                <template #bodyCell="{ text, record, index, column }">
                    <template v-if='slots[column.dataIndex]'>
                        <slot :name='column.dataIndex' :text='text' :record='record' :index='index' :column='column'></slot>
                    </template>
                </template>
            </a-table>
        </div>

        <div class='m-t-20'>
            <XPagination :show-loading='false' ref='paginationRef' :api='pageApi' @finish='pageFinish' />
        </div>

    </div>
</template>

<script lang='ts' setup>
    import { nextTick, reactive, ref, useSlots } from "vue"
    import { Column, Filter } from "../types"
    const props = withDefaults(defineProps<{
        columns : Column[],
        api : Function,
        selection? : boolean,
        search:boolean
    }>(), {
        search : true
    })

    const emit = defineEmits<{
        (e : 'selectionChange', rows:any[]) : void
    }>()

    const slots = useSlots()

    const filter = reactive<any[]>([])
    const columns = reactive<any[]>([])

    const queryParams = ref<any>({})
    const paginationRef = ref()
    const rowsData = reactive([])
    const loading = ref(false)
    
    props.columns.forEach(column => {
        if(column.inFilter) {
            let item:Filter = {}
            if(column.filter) {
                item = Object.assign(item, column.filter)
            }

            if(!item.type) {
                item.type = 'text'
            }
            if(!item.label) {
                item.label = column.title
            }
            if(!item.name) {
                item.name = column.dataIndex
            }

            filter.push(item)
        }


        if(!column.hideInTable) {
            columns.push(column)
        }

    })

    async function pageApi(params:any) {
        loading.value = true
        const res = await props.api({...params, ...queryParams.value}) 
        loading.value = false
        return res
    }

    function search(params) {
        queryParams.value = params
        nextTick(() => {
            paginationRef.value.load()
        })
        
    }

    function pageFinish(rows) {
        rowsData.splice(0)
        rowsData.push(...rows) 
    }

    function handleSelectionChange(rows) {
        emit('selectionChange', rows)
    }


    defineExpose({
        load() {
            paginationRef.value.load()
        }
    })

</script>

<style scoped lang='scss' module>
    .searchPart{
        margin-bottom: 30px;
    }
    .toolBar{
        display: flex;
        margin-bottom: 10px;
        gap: 15px;
        //justify-content:flex-end;
    }
</style>